<template>
  <div class="mapbox" ref="map">地图子组件</div>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
// 引入中国地图的JSON数据
import chinaJSON from "./china.json";
// 获取DOM元素
let map = ref();
// 注册中国地图
echarts.registerMap("china", chinaJSON);
onMounted(() => {
  let mychart = echarts.init(map.value);
  // 设置配置项
  mychart.setOption({
    // 地图组件
    geo: {
      map: "china", // 中国地图
      roam: true, // 鼠标缩放的效果
      // 地图的位置调试
      top: 50,
      left: 100,
      right: 100,
      bottom: 0,
      // 地图上的文字的设置
      label: {
        show: true, // 文字显示出来
        // rotate: 20, // 地图的旋转
        color: "white",
        fontSize: 14,
      },
      itemStyle: {
        // 每一个多边形的样式
        color: {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "red", // 0% 处的颜色
            },
            {
              offset: 1,
              color: "blue", // 100% 处的颜色
            },
          ],
          global: false, // 缺省为 false
        },
        // 透明度
        opactity: 0.8,
      },
      // 地图高亮的效果
      emphasis: {
        itemStyle: {
          color: "red",
        },
        label: {
          fontSize: 20,
        },
      },
    },
    // 布局位置
    grid: {
      left: 0,
      top: 0,
      right: 0,
      bottom: 0,
    },
    series: [
      {
        type: "lines", // 航线的系列
        data: [
          {
            coords: [
              [116.405285, 39.904989], // 起点
              [119.306239, 26.075302], // 终点
            ],
            // 统一的样式设置
            lineStyle: {
              color: "white",
              width: 5,
            },
          },
          {
            coords: [
              [110.405285, 34.904989], // 起点
              [121.306239, 27.075302], // 终点
            ],
            // 统一的样式设置
            lineStyle: {
              color: "yellow",
              width: 5,
            },
          },
        ],
        // 开启动画特效
        effect: {
          show: true,
          symbol:
            "path://M837.41 667.548l-1.637-4.553c-10.379-28.952-54.766-133.386-76.051-183.189 41.235-35.601 71.717-63.556 83.387-75.227 62.773-62.774 62.774-164.915 0-227.689-30.408-30.409-70.839-47.155-113.844-47.155s-83.436 16.747-113.845 47.156c-12.218 12.218-39.991 42.566-75.006 83.136-49.25-20.938-154.305-65.367-183.41-75.8l-4.555-1.638c-18.543-6.677-34.557-12.443-50.288-13.451-19.687-1.27-36.336 5.206-50.901 19.773l-30.406 30.406c-31.192 31.192-31.192 81.945 0 113.137L366.73 478.328a1858.529 1858.529 0 0 0-24.972 35.603l-62.869-38.105c-37.231-23.474-86.632-12.363-110.219 24.827l-30.529 48.136c-11.445 18.045-15.178 39.467-10.511 60.32 4.667 20.854 17.175 38.641 35.221 50.086l83.058 52.677c-1.118 19.926 3.979 35.694 15.252 46.968 10.236 10.236 24.267 15.427 41.701 15.427 1.724 0 3.494-0.062 5.296-0.165l52.712 83.111c15.218 23.994 41.179 37.132 67.687 37.132a79.545 79.545 0 0 0 42.719-12.421l48.136-30.529c18.045-11.445 30.553-29.232 35.22-50.086 4.651-20.783 0.96-42.131-10.396-60.138l-38.146-62.936a1862.752 1862.752 0 0 0 35.589-24.959l145.867 145.868c15.109 15.11 35.199 23.432 56.569 23.432 21.369 0 41.459-8.321 56.568-23.432l30.405-30.405c14.565-14.566 21.034-31.217 19.772-50.902-1.006-15.732-6.772-31.746-13.45-50.289zM237.424 275.885c0-10.685 4.161-20.729 11.715-28.284l30.406-30.406c12.243-12.244 22.178-10.357 59.354 3.028l4.607 1.657c25.777 9.241 117.469 47.893 169.688 70.049-38.419 45.538-82.11 99.485-122.555 153.742L249.14 304.169c-7.555-7.554-11.716-17.599-11.716-28.284z m-70.759 324.487c-2.333-10.427-0.467-21.138 5.255-30.16l30.529-48.136c11.813-18.625 36.578-24.167 55.203-12.354l61.954 37.553c-18.771 29.159-34.023 55.464-45.615 78.704-8.127 16.294-14.432 30.971-19.01 44.278l-70.706-44.843c-9.023-5.722-15.276-14.615-17.61-25.042z m143.121 43.461c22.405-44.92 59.574-102.442 110.477-170.97 89.769-120.852 196.215-240.459 223.444-267.688 22.854-22.854 53.239-35.44 85.56-35.44s62.706 12.586 85.56 35.439c47.178 47.178 47.178 123.942-0.001 171.121-23.355 23.356-124.237 113.789-235.309 198.994-180.316 138.323-250.73 158.977-276.655 158.977-6.44 0-10.955-1.248-13.417-3.711-7.053-7.053-5.957-33.996 20.341-86.722z m200.341 118.232l0.214 0.346c5.722 9.022 7.588 19.733 5.255 30.16-2.334 10.427-8.587 19.321-17.61 25.043l-48.135 30.529c-18.625 11.813-43.389 6.271-55.203-12.355l-44.904-70.802c24.714-8.492 54.083-22.856 88.614-43.308 10.971-6.497 22.443-13.604 34.385-21.293l37.384 61.68z m292.677-21.611l-30.405 30.406c-7.555 7.555-17.6 11.715-28.283 11.715-10.685 0-20.729-4.16-28.284-11.716L574.335 629.362a2679.5 2679.5 0 0 0 29.526-22.336c44.234-33.934 86.958-68.77 123.98-100.011 22.41 52.542 61.085 143.834 70.277 169.478l1.656 4.606c13.388 37.176 15.274 47.111 3.03 59.355z",
          color: "aqur",
          symbolSize: 30,
        },
      },
    ],
  });
});
</script>

<style scoped lang="scss"></style>
